<template>
  <div class="contentStyle" >
    <van-grid direction="horizontal" :column-num="1" :border="false"  :center="false" :icon-size="38">
      <van-grid-item icon="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg" text="平头哥平头哥" />
    </van-grid>
    <p class="title-text">{{product.name}}</p>
    <!--<van-image src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg"></van-image>-->
    <!-- 图片 -->
    <van-grid :border="false" :column-num="3" >
      <van-grid-item @click.stop="imagePreview(value)" v-for="value in 3" :key="value">
        <van-image src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg"  />
      </van-grid-item>
      <!--<van-grid-item>-->
      <!--<van-image src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg" />-->
      <!--</van-grid-item>-->
      <!--<van-grid-item>-->
      <!--<van-image src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg" />-->
      <!--</van-grid-item>-->
    </van-grid>
    <!-- 标签 -->
    <van-row type="flex" justify="space-between">
      <van-col span="10">
        <van-tag plain round type="default" size="medium">步行街主干道</van-tag>
      </van-col>
      <van-col span="14">
        <div class="answer-count" style="text-align:right">该帖有120条亮回复</div>
      </van-col>
    </van-row>
    <!-- 评论 -->
    <div class="comment">
      <van-row type="flex" justify="space-between">
        <van-col span="14">
          <van-grid direction="horizontal" :column-num="1" :border="false"  :center="false" :icon-size="38" icon-size="24px">
            <van-grid-item  icon="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg" text="are you ok" />
          </van-grid>
        </van-col>
        <van-col span="10" >
          <div class="light-count" >
            <span style="font-size: 13px">110</span>
            <van-icon name="bulb-o" size="2.1em" />
          </div>
        </van-col>
        <van-col span="24">
          <p class="light-answer">发房间爱立方佳爱琉今飞凯达垃圾卡了发的法师法师法师</p>
        </van-col>
      </van-row>
    </div>
    <!-- 点赞 -->
    <van-row type="flex" justify="space-around">
      <van-col span="6" offset="4">
        <van-icon name="share-o" />
        <span class="gray_text">{{product.price}}</span>
      </van-col>
      <van-col span="6">
        <van-icon name="chat-o" />
        <span class="gray_text">{{product.price}}</span>
      </van-col>
      <van-col span="6">
        <van-icon name="good-job-o" />
        <span class="gray_text">{{product.price}}</span>
      </van-col>
    </van-row>
    <van-divider />

  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import { ImagePreview } from 'vant';
  export default {
    name: "goods",
    data() {
      return {
        show: false,
      };
    },
    props:['product'],
    methods:{
      ...mapActions(['addCart']),
      imagePreview(value){
        console.log(value)
        ImagePreview({
          images: [
            'http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg',
            'http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg',
            'http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg',
          ],
          startPosition: value-1,
        });
      }
    }
  }
</script>

<style scoped>
  .cart-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .gray_text{
    color:black;
    font-size: 15px;
  }
  .title-text{
    font-size: 22px;
    margin-top: auto;
    margin-left: 5px;
    margin-bottom: 2px;
  }
  .answer-count{
    text-align:right;
    color: #969799;
    font-size: 10px;
  }
  .light-count{
    text-align:right;
    color: #969799;
    font-size: 10px;
    margin-top: 7px;
  }
  .light-answer{
    margin: 0px;
  }
  .comment{
    height: 100%;
    background:#e7e7e7;
    padding: 0 10px 15px;
    margin: 5px 0;
  }
  /deep/ .comment .van-grid-item .van-grid-item__content{
    background:#e7e7e7;
  }
  .contentStyle{
    margin: 0;
    padding: 0 7px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 1px;
  }
  /deep/.van-grid-item .van-grid-item__content{
    background:#fff;
  }

</style>
